<template>
    <div class="feedback">
        <div class="liuhai"></div>
        <div class="md-header">
            <div>
                <i class="settings-icon" @click="goTo('/mine')">&#xe600;</i>
            </div>
            <div>反馈</div>
            <div class="my-feedback" @click="goTo('/myfeedback')">我的反馈</div>
        </div>
        <div class="feed-form">
            <form action=" ">
                <label for="opinionInput">请描述具体问题</label>
                <div class="feed-textarea">
                    <textarea placeholder="异常发生的时间，网络状况，具体位置及表现等" maxlength="100" @input="descInput" v-model="desc" id="opinionInput"></textarea>
                    <span class="xianzhi" id="xianz">{{remnant}}/100</span>
                </div>
                <div class="picture-supplement">
                    <div style="height: 30px;"></div>
                    <label for="opinionInput">图片补充:(相关图片能帮程序员小哥快速解决问题哦)</label>
                    <van-uploader v-model="fileList" multiple />
                </div>
                <div class="contact-information">
                    <div style="height: 30px;"></div>
                    <label for="opinionInput">联系方式:(选填)</label>
                    <input type="text" placeholder="请注明是QQ/微信/手机号的哪一种">
                </div>
                <input type="submit" id="submit" value="提交反馈"/>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                remnant: 100,
                desc:"",
                fileList: []
            }
        },
        methods:{
            descInput(){
                var txtVal = this.desc.length;
                this.remnant = 100 - txtVal;
                if (this.remnant === 0){
                    document.getElementById("xianz").style.color = "red"
                }else{
                    document.getElementById("xianz").style.color = "#999"
                }
            },
            goTo(path) {
                this.$router.replace(path);
            },
        }

    }
</script>

<style>
    .feedback{
        height: 100vh;
        background: white;
    }
    .my-feedback{
        display: flex;
        align-items: center;
        color: #999999;
    }
    .feed-form{
        width: 100%;
        height: auto;
        padding: 0 16px;
    }
    .feed-form label{
        display: block;
        margin-bottom: 20px;
    }
    .feed-textarea{
        width: 688px;
        height: 382px;
        position: relative;
    }
    .feed-textarea>textarea{
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid #999;
        border-radius: 20px;
        text-indent: 20px;
        padding: 10px 10px;
    }
    .feed-textarea>span{
        position: absolute;
        bottom: 3%;
        right: 3%;
        color: #999;
    }
    .van-uploader__upload,.van-uploader__preview-image{
        width: 220px !important;
        height: 220px !important;
        border: 1px dashed #999 !important;
    }
    .van-uploader__upload-icon{
        font-size: 72px !important;
    }
    .contact-information>input{
        width: 100%;
        height: 68px;
        border-radius: 20px;
        border: 1px solid #999;
        outline: none;
        text-indent: 20px;
        line-height: 68px;
    }
    .feed-form #submit{
        display: block;
        width: 580px;
        height: 72px;
        background: #ec9b38;
        color: white;
        border: none;
        margin: 50px auto;
        border-radius: 50px;
    }
</style>
